// 右侧区域
import BasicInformation from "./BasicInformation"
import OverallAudit from "./OverallAudit"
import AuditPortrait from "./AuditPortrait"
import AuditRectification from "./AuditRectification"

const RightSided = ({ data = {}, title = "" }) => {
  const { basicInfo, auditOverview, auditWeakness, auditRectification } = data

  return (
    <div
      className="text-[14px] flex flex-col w-[875px] h-[932px] px-[28px] pt-[17px] pb-[11px] rounded-[15px]"
      style={{
        backgroundImage: `linear-gradient(180deg, rgba(218, 235, 255, 0.4616) -1%, rgba(242, 249, 255, 0.3917) 125%)`,
        border: "1px solid white"
      }}
    >
      <div
        className="w-[322px] h-[38px] pl-[36px] text-[22px] font-[900]"
        style={{
          backgroundImage: `url('assistant-decision/top-title_bg.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover"
        }}
      >
        审计画像
      </div>
      <div className="mt-[24px] h-[42px] ml-[78px] mr-[78px] flex items-center justify-between">
        <div
          className="flex-none h-[21px] w-[132px]"
          style={{
            backgroundImage: `url('assistant-decision/title_left_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover",
            backgroundPosition: "100%"
          }}
        ></div>
        <div className="text-[24px] font-[700] flex-1 text-center">
          {title}审计画像评价
        </div>
        <div
          className="flex-none h-[21px] w-[132px]"
          style={{
            backgroundImage: `url('assistant-decision/title_right_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "contain"
          }}
        ></div>
      </div>
      <div
        id="right-container"
        className="relative flex-1 pr-[5px] overflow-y-auto overflow-x-hidden scroll-smooth custom-scrollbar"
      >
        {/* 基本情况 */}
        <BasicInformation data={basicInfo} />
        {/* 审计总体情况 */}
        <OverallAudit data={auditOverview} />
        {/* 审计画像评价 */}
        <AuditPortrait data={auditWeakness} />
        {/* 审计整体整改情况 */}
        <AuditRectification data={auditRectification} />
      </div>
    </div>
  )
}

export default RightSided
